<template>
	<view>
		<uni-nav-bar left-icon="back" @clickLeft="$tab.back()" :statusBar="true" :fixed="true" :border="false"></uni-nav-bar>
		
		<div class="py-36 px-32" v-if="detail">
			<div class="flex items-center">
				<image :src="globalConfig.imagePrefix + detail.icon" mode="" class="image-1 round-8"></image>
				<div class="ml-24 pt-16" style="flex-grow: 1;">
					<div class="text-32 font-500">
						{{detail.name}}
					</div>
					<div class="text-24 mt-24" style="color: #999999;">
						{{detail.typeInfo.name}}·热度{{detail.hotNum}}万
					</div>
					<div class="flex items-center justify-between text-24" style="margin-top:56rpx">
						<div class="add" @click="handleBinge">
							{{detail.binge ? '已添加' : '添加到我的追剧'}}
						</div>
						<div class="play" @click="$tab.nav(`/pages/chat/shortPlay/vertical-swiper?id=${id}`)">
							播放
						</div>
					</div>
				</div>
			</div>
			<div class="mt-32 font-500 text-32">
				剧情简介
			</div>
			<div class="mt-24">
				{{detail.profile}}
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:null,
				globalConfig:getApp().globalData.config,
				id:null
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getDetail()
		},
		methods:{
			async getDetail(){
				const res = await this.$Api.shortPlay.shortPlayDetail({
					id:this.id
				})
				this.detail = res.data
			},
			async handleBinge(){
				const res = await this.$Api.shortPlay.addShortPlay({
					id:this.id
				})
				this.getDetail()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FFF;
	}
	
	.image-1{
		width: 168rpx;
		height: 232rpx;
	}
	
	.add{
		width: 218rpx;
		height: 76rpx;
		background: #D8D8D8;
		border-radius: 12rpx;
		line-height: 76rpx;
		text-align: center;
		color: #6C6C6C;
	}
	
	.play{
		width: 218rpx;
		height: 76rpx;
		background: #F35D2A;
		border-radius: 12rpx;
		line-height: 76rpx;
		text-align: center;
		color: #FFFFFF;
	}
</style>
